<!DOCTYPE html>
<html>
<head>
<title>MUsgo Vive la Musica</title>

<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'estructuraFondo.css')}" />
<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'grid.css')}" />
<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'formularioNick.css')}" />
<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'menus.css')}" />
<g:javascript src="jquery-1.8.2.js" />
<script type="text/javascript">

function mostrarLogin(){
	
	$('#login_invisible').show(1500);
	$('#registropass_invisible').hide(1500);
	$('#artistames').hide(1500);

}
function mostrarRegistro(){
	
	$('#registropass_invisible').show(1500);
	$('#login_invisible').hide(1500);
	$('#artistames').hide(1500);
}

</script>

</head>
<body>
    <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
           
            <g:img dir="images/imgProyecto" file="b.PNG" />
        </div>
        </div>
        <div id="navigationwrap">
        
            <div id='cssmenu'>
				<ul>
  				 	<li class='active '><a href='/proyectoIngedos/principal/principal'><span>&nbsp;&nbsp;&nbsp;  Home &nbsp;&nbsp;&nbsp;</span></a></li>
   					<li class='has-sub '><a href='#'><span>&nbsp;&nbsp;&nbsp;  Musgo &nbsp;&nbsp;&nbsp;</span></a>
      			<ul>
         			<li><a href='#'><span>Quienes somos</span></a></li>
         			<li><a href='#'><span>Product 2</span></a></li>
      			</ul>
   			</li>
   			<li><a href='#'><span>&nbsp;&nbsp;&nbsp;  Eventos&nbsp;&nbsp;&nbsp;</span></a></li>
   			<li><a href='#'><span>&nbsp;&nbsp;&nbsp;  Destacados&nbsp;&nbsp;&nbsp;</span></a></li>
   			<li><a href='#'><span>&nbsp;&nbsp;&nbsp;  Busqueda&nbsp;&nbsp;&nbsp;</span></a></li>
   			<li><a href='/proyectoIngedos/principal/contacto'><span>&nbsp;&nbsp;&nbsp;  Contacto&nbsp;&nbsp;</span></a></li>
</ul>
</div>
        
        </div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
        
        <div id="button-box">
    		<br><br>
    		<a href="#" class="button" onclick="mostrarLogin()">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; LOGIN &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>
    	</div>
    	
    	<div id="button-box">
    		<br><br>
    		<a href="#" class="button" onclick="mostrarRegistro()">REGISTRARSE</a>	
    	</div>

        <br><br>
        <g:form>   
        <g:actionSubmitImage value="registro"  action="contacto" src="${resource(dir: 'images/imgProyecto', file: 'proximoevento1.png')}" />  
        </g:form> 
        <br><br>
        </div>
        </div>
        <div id="contentwrap">
        <div id="content">
          
        <div id="artistames">
         
        <br><div id="derechafoto">
        <img style="width: 250px; height: 260px;" src="${createLink(action:'imagen', id:"${artista.imagenperfil.id}")}"/>&nbsp;&nbsp;&nbsp;
        
        </div><br><br><br><br><br><br><br>
         
         <div id="informacionartistames">
       <label id="letrainformacionartista1" >Nombre: </label>
       <label id="letrainformacionartista2">&nbsp;&nbsp;&nbsp;${artista.nombre }</label><br><br>
       <label id="letrainformacionartista1" >Numeros de albums: </label>
       <label id="letrainformacionartista2">&nbsp;&nbsp;&nbsp;${artista.pais }   Albums</label><br><br>
       <label id="letrainformacionartista1" >Cancion mas Valorada: </label>
       <label id="letrainformacionartista2">&nbsp;&nbsp;&nbsp;${artista.ciudad }   <h7><a href='#'><span>Escuchar</a></h7></label>
        
        </div>
        
		
       
        </div>
        
        
        <img id="top" src="/proyectoIngedos/images/imgProyecto/top.png" alt="">
        
 <!-- ----------------------------------------------------------------------------------------------- -->       
		
		<div id="login_invisible"> <!-- formulario login -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_log" class="appnitro"  method="post" action="Login">
			<div class="form_description">
			<h2>Login Musgo </h2>
			<p>Bienvenido a Musgo !! Disfruta nuestros servicios.</p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="password"  type="password" maxlength="100" value=""/> 
		</div> 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="log" />
			    
				<g:actionSubmit value="Entrar" action="login"/>
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario login-->
	
<!-- ---------------------------------------------------------------------------------------------------- -->
	<div id="registropass_invisible"> <!-- formulario registro nick pass -->
	
		<h1><a>Untitled Form</a></h1>
		<form id="form_registro" class="appnitro"  method="post" action="registro" enctype="multipart/form-data">
			<div class="form_description">
			<h2>REGISTRO MUSGO </h2>
			<p>Ingresa los datos requeridos, unete y disfrutar de nuestros servicios!  </p>
		</div>						
			<ul >
			
		<li id="li_1" >
		<label class="description" for="element_1">Nick </label>
		<div>
			<input id="element_1" name="nick" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del nick de 5 a 40 caracteres</small></p>
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Password </label>
		<div>
			<input id="element_2" name="password"  type="password" maxlength="100" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>Tamaño del password de 5 a 40 caracteres</small></p>
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Nombre del Artista o Grupo </label>
		<div>
			<input id="element_3" name="nombre" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Email </label>
		<div>
			<input id="element_4" name="email" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> <p class="guidelines" id="guide_1"><small>email@abcd.com</small></p>
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Pais </label>
		<div>
			<input id="element_5" name="pais" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Ciudad </label>
		<div>
			<input id="element_6" name="ciudad" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Historia </label>
		<div>
			<textarea id="element_7" name="historia" class="element textarea small"></textarea> 
		</div> 
		</li>		<li id="li_8" >
		<label class="description" for="element_8">Integrantes </label>
		<div>
			<textarea id="element_8" name="integrantes" class="element textarea small"></textarea> 
		</div> 
		</li>		<li id="li_9" >
		<label class="description" for="element_9">Foto </label>
		<div>
			<input id="element_9" name="imagenp" class="element file" type="file"/> 
		</div>  
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="registro" />
			    
				<g:actionSubmit value="Registrar" action="registro" />
		</li>
			</ul>
		</form>	
		
	</div><!-- formulario registro nick pass-->


	
	
	
	
	<img id="bottom" src="/proyectoIngedos/images/imgProyecto/bottom501.png" alt="">		
</div><!-- fin login  y artista de l mes -->

<br><br> 
<label id="letraabc" >Lista de canciones </label>

<div id='cssmenu1'>
<ul>
   <li><a href='index.html'><span>A</span></a></li>
   <li><a href='#'><span>B</span></a></li>
   <li><a href='#'><span>E</span></a></li>
   <li><a href='#'><span>F</span></a></li>
   <li><a href='#'><span>E</span></a></li>
   <li><a href='#'><span>F</span></a></li>
   <li><a href='#'><span>G</span></a></li>
   <li><a href='#'><span>H</span></a></li>
   <li><a href='#'><span>I</span></a></li>
   <li><a href='#'><span>J</span></a></li>
   <li><a href='#'><span>K</span></a></li>
   <li><a href='#'><span>L</span></a></li>
   <li><a href='#'><span>M</span></a></li>
   <li><a href='#'><span>N</span></a></li>
   <li><a href='#'><span>O</span></a></li>
   <li><a href='#'><span>P</span></a></li>
   <li><a href='#'><span>K</span></a></li>
   <li><a href='#'><span>Q</span></a></li>
   <li><a href='#'><span>R</span></a></li>
   <li><a href='#'><span>S</span></a></li>
   <li><a href='#'><span>T</span></a></li>
   <li><a href='#'><span>U</span></a></li>
   <li><a href='#'><span>V</span></a></li>
   <li><a href='#'><span>w</span></a></li>
   <li><a href='#'><span>X</span></a></li>
   <li><a href='#'><span>Y</span></a></li>
   <li><a href='#'><span>Z</span></a></li>
   <li><a href='#'><span>#</span></a></li>
</ul>
</div>
 <br><br> 
 <label id="letraabc" > Nuevos Albums </label>   <br> <br>        
  <div class="grid">
  <div class="grid-m1"></div>
  <div class="grid-c1">
    aqui ponemos fotos
     de albunes nuevos
     ...............
     ..............
     .............. 
  </div>
  <div class="grid-m2"></div>
  <div class="grid-c2">
    en cada columna
     ponemos foticos 
     de los albunes y
      el link para entrar
  </div>
  <div class="grid-m3"></div>
  <div class="grid-c3">
    albunes albunes albunes
    albunes albunes albunes
  </div>
  <div class="grid-m4"></div>
  <div class="grid-c4">
     albunes albunes albunes
    albunes albunes albunes
  </div>
  <div class="grid-m5"></div>
  <div class="grid-c5">
    esta columna se echa pa abajo en forma brrurtal........................
    ........................................................................
    ........................................................................
    ................................................................
    ..............................................
    
     </div>
  <br style="clear:both" />
</div>
           
           
           
           
        </div>
        <div id="footerwrap">
        <div id="footer">
            <p>Proyecto academico "Musgo" ,Universidad nacional de Colombia, Ingenieria de software II 2012</p>
        </div>
        </div>
    </div>
</body>
</html>